import React, { useEffect, useRef } from "react"
import "./index.css"

interface TodoBottomProps {
  removeAllCheckedTodoEvent: () => void
  allCheckChangeEvent: () => void
  isAllCheckStatus: boolean
}

const TodoBottom: React.FC<TodoBottomProps> = ({
  allCheckChangeEvent,
  removeAllCheckedTodoEvent,
  isAllCheckStatus,
}) => {
  const allCheckRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    console.log("isAllCheckStatus=", isAllCheckStatus)
    allCheckRef.current!.checked = isAllCheckStatus
  }, [isAllCheckStatus])
  const allCheckChange = () => {
    allCheckChangeEvent()
  }
  return (
    <div className="bottom">
      <div>
        <input
          type="checkbox"
          name="allCheck"
          id="allCheck"
          value="allCheck"
          ref={allCheckRef}
          onChange={allCheckChange}
          defaultChecked={isAllCheckStatus}
        />
        <label htmlFor="allCheck">全选</label>
      </div>
      <button onClick={removeAllCheckedTodoEvent}>删除</button>
    </div>
  )
}

export default TodoBottom
